<!-- 搜索页 -->
<template>
	<view :style="$store.state.skin">
		<view class="container">
			<!-- 搜索栏-start -->
			<!-- #ifdef APP-PLUS -->
			<view class="backcolor" :style="{ 'padding-top': statusBar }">
				<luyj-search-bar placeholder="请输入股票代码/股票名称" radius="100" maxlength="11" cancel-color="#fff" v-model="keyword" @input="searchchange"></luyj-search-bar>
			</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="backcolor">
				<luyj-search-bar placeholder="请输入股票代码/股票名称" radius="100" maxlength="11" cancel-color="#fff" v-model="keyword" @input="searchchange"></luyj-search-bar>
			</view>
			<!-- #endif -->
			<!-- 搜索栏-end -->
			<!-- list列表-start -->
			<view class="liststock">
				<view class="section-list" @click="godetail(liststock.all_no)" v-for="(liststock, index) in listlonde">
					<view class="left-list">
						<view class="left-list-text">
							<text :class="liststock.all_no.substring(0, 2)">{{ liststock.all_no.substring(0, 2) }}</text>
							<text>{{ liststock.name }}</text>
						</view>
						<view class="left-list-num">{{ liststock.all_no }}</view>
					</view>
					<view class="right-list" v-if="liststock.all_no.substring(0, 2) == 'sh'">上证</view>
					<view class="right-list" v-else-if="liststock.all_no.substring(0, 2) == 'bj'"></view>
					<view class="right-list" v-else>深证</view>
				</view>
			</view>
			<!-- list列表-end -->
		</view>
	</view>
</template>

<script>
import debounce from './debounce.js';
import request from '/api/request.js';
export default {
	data() {
		return {
			listStock: [],
			keyword: '',
			statusBar : 0,
			// 买入页面需要的参数
			isActive : 0,
		};
	},
	// 买入传递过来的参数
	onLoad(option) {
		if(option){
			this.isActive = Number(option.isActive);
		}
	},
	created() {
		let that = this;
		<!-- #ifdef APP-PLUS -->
			uni.getSystemInfo({
				success(e) {
					that.statusBar = e.statusBarHeight + 'px';
				}
			});
		<!-- #endif -->
	},
	// 计算属性---可以将数据保留下来
	computed: {
		listlonde() {
			return this.listStock.filter((item) => item.name.includes(this.keyword) || item.num.includes(this.keyword));
		}
	},
	methods: {
		godetail(e){
			uni.navigateTo({
				url:`/pages/wangneng/wangneng?code=${e}&isActive=${this.isActive}`
			})
		},
		searchchange: debounce(function (e) {
			if (e != '') {
				request
					.get('/api/index/search', {
						like: e,
						limit: 50
					})
					.then((res) => {
						if (res.code == 1) {
							this.listStock = res.data;
						}
					});
				// .catch((error) => {
				// 	console.log(error);
				// })
			}
		}, 500)
	}
};

// 防抖
// function debounce(fn, delay) {
// 	var timeout = null;
// 	return function(e) {
// 		clearTimeout(timeout);
// 		timeout = setTimeout(() => {
// 			fn.apply(this, arguments);
// 		}, delay);
// 	};
// }
</script>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100%;
	background-color: rgb(245, 245, 245) !important;
	font-family: PingFangSC-Light, 'helvetica neue', 'hiragino sans gb', tahoma, 'microsoft yahei ui', 'microsoft yahei', simsun, sans-serif;
	color: #282828;
	margin: 0px;
	padding: 0px;
	position: absolute;
}

.backcolor {
	background-color: var(--nav-bg) !important;
}

// list列表-start
.liststock {
	margin-top: 0.5rem !important;
	background-color: #fff;

	.section-list {
		display: flex;
		padding: 0.3rem 0.6rem;
		justify-content: space-between;
		align-items: center;

		.left-list {
			display: flex;
			flex-direction: column;

			.left-list-text text {
				color: #333333;
				font-size: 0.8rem;
				line-height: 1.5;
			}

			.left-list-num {
				color: #999999 !important;
				font-size: 0.6rem !important;
				line-height: 1.5;
			}
		}

		.right-list {
			background: var(--nav-bg);
			color: #ffffff;
			width: 3.5rem;
			font-size: 0.7rem;
			text-align: center;
			line-height: 1rem;
		}
	}
}

.sz {
	background: #9b79ea;
	color: #fff !important;
	border-radius: 0.1rem;
	font-size: 0.5rem !important;
	padding: 0 0.2rem;
	margin-right: 0.3rem;
}

.sh {
	background: #f33841;
	color: #fff !important;
	border-radius: 0.1rem;
	font-size: 0.5rem !important;
	padding: 0 0.2rem;
	margin-right: 0.3rem;
}

.bj {
	background: #4474bb;
	color: #fff !important;
	border-radius: 0.1rem;
	font-size: 0.5rem !important;
	padding: 0 0.2rem;
	margin-right: 0.3rem;
}

//list列表-end
</style>
